<template>
	<view class="reserve app-pages">
		<view class="cell">
			<view class="cell-item">
				<view class="cell-item-label">
					联系电话:
				</view>
				<view class="cell-item-value">
					<input type="text" v-model="val">
				</view>
			</view>

			<view class="cell-item">
				<view class="cell-item-label">
					物流方式:
				</view>
				<view class="cell-item-value">
					<u-radio-group v-model="radiovalue1" placement="row">
						<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in radiolist1" :key="index"
							:label="item.name" :name="item.name">
						</u-radio>
					</u-radio-group>
				</view>
			</view>

			<view class="cell-item">
				<view class="cell-item-label">
					演出地点:
				</view>
				<view class="cell-item-value">
					<input type="text" v-model="val">
				</view>
			</view>

			<view class="cell-item">
				<view class="cell-item-label">
					演出时间:
				</view>
				<view class="cell-item-value">
					<input type="text" v-model="val">
				</view>
			</view>

			<view class="cell-item">
				<view class="cell-item-label">
					特殊要求:
				</view>
				<view class="cell-item-value">
					<textarea name="" v-model="val" id="" cols="30" rows="10"></textarea>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				val: '',
				radiovalue1: '苹果',
				radiolist1: [{
						name: '苹果',
						disabled: false
					},
					{
						name: '香蕉',
			  	disabled: false
			 	},
			  {
						name: '橙子',
						disabled: false
					}, {
						name: '榴莲',
						disabled: false
					}
				],
			}
		}
	}
</script>

<style lang="scss" scoped>
	.reserve {
		font-size: 30rpx;
		.cell{
			.cell-item{
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				.cell-item-label{
					min-width: 160rpx;
					max-width: 160rpx;
					border: 1px solid red;
				}
				.cell-item-value{
					flex: 1;
				}
			}
		}
	}
</style>
